<template>
  <section class="config-auth">
    <section class="set-info">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">企业信息</template>
          <el-row :gutter="20">
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">企业名称：</span>
                <span class="item-content">{{ obj.enterpriseName || '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">社会统一信用代码：</span>
                <span class="item-content">{{ obj.enterpriseCode || '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">有效期：</span>
                <span class="item-content">{{ obj.startDate ? obj.startDate.substring(0, 10) : '' }} -- {{ obj.endDate ? obj.endDate.substring(0,10) : '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">企业电话：</span>
                <span class="item-content">{{ obj.enterpriseTelephone || '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">企业邮箱：</span>
                <span class="item-content">{{ obj.enterpriseEmail || '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">所在地区：</span>
                <span class="item-content">{{ obj.regionId || '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">企业网址：</span>
                <span class="item-content">{{ obj.enterpriseWebsite || '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">系统主地址：</span>
                <span class="item-content">{{ obj.systemUrl1 || '' }}</span>
              </section>
            </el-col>
            <el-col :span="8">
              <section class="info-item">
                <span class="item-label">系统备用地址：</span>
                <span class="item-content">{{ obj.systemUrl2 || '' }}</span>
              </section>
            </el-col>
            <el-col :span="24">
              <section class="info-item">
                <span class="item-label">企业地址：</span>
                <span class="item-content">{{ obj.enterpriseAddress || '' }}</span>
              </section>
            </el-col>
            <el-col :span="24">
              <section class="info-item">
                <span class="item-label">企业简介：</span>
                <span class="item-content">{{ obj.enterpriseAboutus || '' }}</span>
              </section>
            </el-col>

            <el-col :span="24">
              <section class="info-item">
                <span class="item-label">备注：</span>
                <span class="item-content">{{ obj.remark || '' }}</span>
              </section>
            </el-col>
            <el-col :span="6">
              <section class="info-item">
                <span class="item-label">管理员姓名：</span>
                <span class="item-content">{{ obj.userRealname || '' }}</span>
              </section>
            </el-col>
            <el-col :span="6">
              <section class="info-item">
                <span class="item-label">管理员手机号：</span>
                <span class="item-content">{{ obj.userPhone || '' }}</span>
              </section>
            </el-col>
            <el-col :span="6">
              <section class="info-item">
                <span class="item-label">管理员性别：</span>
                <span class="item-content">{{ obj.userSex == 'MAN' ? '男' : '女' }}</span>
              </section>
            </el-col>
            <el-col :span="6">
              <section class="info-item">
                <span class="item-label">管理员邮箱：</span>
                <span class="item-content">{{ obj.userEmail || '' }}</span>
              </section>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </section>

    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            是否允许注册
            <el-tag size="mini">{{ form.registerTime ? '上次设置时间：'+ form.registerTime : '未设置' }}</el-tag>
          </template>
          <section class="card-inner">
            <el-radio-group v-model="form.register">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <el-button :loading="loading4register" type="primary" style="margin-left: 10px;" @click="handleComit('register')">确 定</el-button>
            <section class="inner-explain">
              <i class="el-icon-warning-outline" />设置职工是否可以自行注册成为系统用户。如果设为“否”，需要由管理员从后台创建或导入职工账号信息。
            </section>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>

    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <span class="name">企业职工认证审核设置</span>
            <el-tag size="mini">审核依据名称：{{ form.basisnameTime ? '上次设置时间-'+ form.basisnameTime : '未设置' }}</el-tag>
            <el-tag size="mini">审核依据说明：{{ form.basisdescTime ? '上次设置时间-'+ form.basisdescTime : '未设置' }}</el-tag>
            <el-tag size="mini">审核图片说明：{{ form.basisimgTime ? '上次设置时间-'+ form.basisimgTime : '未设置' }}</el-tag>
            <el-tag size="mini">备注：{{ form.basismarkTime ? '上次设置时间-'+ form.basismarkTime : '未设置' }}</el-tag>
          </template>
          <section class="card-inner">
            <el-form :model="form" label-position="right" label-width="100px">
              <el-form-item label="审核依据名称">
                <el-input v-model.trim="form.basisname" placeholder="请输入审核依据名称" style="width: 50%;" />
                <el-button :loading="loading4basisname" type="primary" style="margin-left: 10px;" @click="handleComit('basisname')">确 定</el-button>
              </el-form-item>
              <el-form-item label="审核依据说明">
                <el-input v-model.trim="form.basisdesc" type="textarea" placeholder="请输入审核依据说明" style="width: 50%;" />
                <el-button :loading="loading4basisdesc" type="primary" style="margin-left: 10px;" @click="handleComit('basisdesc')">确 定</el-button>
              </el-form-item>
              <el-form-item label="审核图片说明">
                <el-input v-model.trim="form.basisimg" type="textarea" placeholder="请输入审核图片说明" style="width: 50%;" />
                <el-button :loading="loading4basisimg" type="primary" style="margin-left: 10px;" @click="handleComit('basisimg')">确 定</el-button>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model.trim="form.basismark" type="textarea" placeholder="请输入备注" style="width: 50%;" />
                <el-button :loading="loading4basismark" type="primary" style="margin-left: 10px;" @click="handleComit('basismark')">确 定</el-button>
              </el-form-item>
              <section class="inner-explain">
                <i class="el-icon-warning-outline" />
                <section>
                  <p>1、系统用户需要通过审核后才能认定为企业职工。职工可以自行发起认证审核申请。</p>
                  <p>2、职工在发起申请时，需要填写“审核依据”，“审核依据”可以是工号、工会会员号等职工在本企业特有的唯一信息。</p>
                  <p>3、“审核依据名称”和“审核依据说明”用于说明和引导职工如何填写审核依据。</p>
                  <p>4、证件号码在认证申请时是必填项，不应设为“审核依据”。</p>
                  <p>5、为了辅助认证，职工可以上传图片用于审核。“审核图片说明”用于说明审核图片的要求。</p>
                  <p>6、“备注”用于说明职工在认证审核时需要说明的其他情况。</p>
                </section>
              </section>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
  </section>
</template>
<script>
import { setDataByType, getEnterpriseInfo, getDataByType } from './../api'
export default {
  name: 'ConfigAuth',
  data() {
    return {
      loading4register: false,
      loading4basisname: false,
      loading4basisdesc: false,
      loading4basisimg: false,
      loading4basismark: false,
      obj: {},
      form: {
        register: 1,
        registerTime: '',
        basisname: '',
        basisnameTime: '',
        basisdesc: '',
        basisdescTime: '',
        basisimg: '',
        basisimgTime: '',
        basismark: '',
        basismarkTime: ''
      },
      formloading: false
    }
  },
  created() {
    this.getSystemData('register')
    this.getSystemData('basisname')
    this.getSystemData('basisdesc')
    this.getSystemData('basisimg')
    this.getSystemData('basismark')
    this.getData()
  },
  methods: {
    handleSelectColor(item) {
      this.form.color = item
    },

    handleComit(type) {
      let name = ''
      let value = ''
      switch (type) {
        case 'register':
          if (this.form.register === '') {
            this.$message({
              type: 'info',
              message: '请选择是否允许注册！'
            })
            return
          }
          name = 'REGISTER_FLAG'
          value = this.form.register ? 'YES' : 'NO'
          this.loading4register = true
          break
        case 'basisname':
          if (!this.form.basisname) {
            this.$message({
              type: 'info',
              message: '请输入审核依据名称！'
            })
            return
          }
          name = 'VERIFY_BASIS'
          value = this.form.basisname
          this.loading4basisname = true
          break
        case 'basisdesc':
          if (!this.form.basisdesc) {
            this.$message({
              type: 'info',
              message: '请输入审核依据说明！'
            })
            return
          }
          name = 'VERIFY_BASIS_DESCRIPTION'
          value = this.form.basisdesc
          this.loading4basisdesc = true
          break
        case 'basisimg':
          if (!this.form.basisimg) {
            this.$message({
              type: 'info',
              message: '请输入审核图片说明！'
            })
            return
          }
          name = 'VERIFY_IMAGE_DESCRIPTION'
          value = this.form.basisimg
          this.loading4basisimg = true
          break
        case 'basismark':
          if (!this.form.basismark) {
            this.$message({
              type: 'info',
              message: '请输入审核备注！'
            })
            return
          }
          name = 'VERIFY_REMARKS'
          value = this.form.basismark
          this.loading4basismark = true
          break
        default:
          break
      }
      return new Promise((resolve, reject) => {
        setDataByType({ configName: name, configValue: value }).then((res) => {
          this.loading4register = false
          this.loading4basisname = false
          this.loading4basisdesc = false
          this.loading4basisimg = false
          this.loading4basismark = false
          this.$message({
            title: '成功',
            message: '设置成功',
            type: 'success',
            duration: 1500
          })
          this.getSystemData(type)
        }).catch(error => {
          reject(error)
        })
      })
    },

    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getEnterpriseInfo().then((res) => {
          loading.close()
          this.obj = Object.assign({}, res.data.data)
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    getSystemData(type) {
      let name = ''
      switch (type) {
        case 'register':
          name = 'REGISTER_FLAG'
          break
        case 'basisname':
          name = 'VERIFY_BASIS'
          break
        case 'basisdesc':
          name = 'VERIFY_BASIS_DESCRIPTION'
          break
        case 'basisimg':
          name = 'VERIFY_IMAGE_DESCRIPTION'
          break
        case 'basismark':
          name = 'VERIFY_REMARKS'
          break
        default:
          break
      }
      return new Promise((resolve, reject) => {
        getDataByType({ name: name }).then((res) => {
          switch (type) {
            case 'register':
              this.form.register = (res.data.data.configValue && res.data.data.configValue === 'YES') ? 1 : 0
              this.form.registerTime = res.data.data.updTime || ''
              break
            case 'basisname':
              this.form.basisname = res.data.data.configValue || ''
              this.form.basisnameTime = res.data.data.updTime || ''
              break
            case 'basisdesc':
              this.form.basisdesc = res.data.data.configValue || ''
              this.form.basisdescTime = res.data.data.updTime || ''
              break
            case 'basisimg':
              this.form.basisimg = res.data.data.configValue || ''
              this.form.basisimgTime = res.data.data.updTime || ''
              break
            case 'basismark':
              this.form.basismark = res.data.data.configValue || ''
              this.form.basismarkTime = res.data.data.updTime || ''
              break
            default:
              break
          }
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss">
.config-auth {
  padding: 10px;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  &::-webkit-scrollbar {
    width: 8px; /*对垂直流动条有效*/
    height: 1px; /*对水平流动条有效*/
  }
  /** 滚动条轨道*/
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 3px;
  }
  /** 滚动条里面小方块*/
  &::-webkit-scrollbar-thumb {
    height: 32px;
    border-radius: 5px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    background-color: #eaeaea;
  }
  &:hover {
    overflow: auto;
  }

  .set-info,
  .set-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .el-collapse {
      border-top: none;
      border-bottom: none;
      .el-collapse-item__header {
        padding-left: 10px;
        border-bottom: none;
        overflow: hidden;
        text-overflow: ellipsis;
        .el-tag {
          margin-left: 10px;
        }
        .name {
          flex-shrink: 0;
          white-space: nowrap;
        }
      }
      .el-collapse-item__content {
        padding: 10px;
      }
      .el-collapse-item__wrap {
        border-bottom: none;
        border-top: 1px solid #e6ebf5;
      }
    }
  }

  .set-card {
    margin-top: 10px;
  }

  .set-info {
    .info-item {
      padding-bottom: 8px;
      vertical-align: top;
      display: flex;
      .item-label {
        color: rgba(0, 0, 0, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5715;
        text-align: start;
      }
      .item-content {
        flex: 1 1;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        line-height: 1.5715;
        word-break: break-word;
        overflow-wrap: break-word;
      }
    }
  }

  .color-inner {
    display: flex;
    align-items: center;
    .inner-item {
      width: 25px;
      height: 25px;
      margin-right: 8px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      > i {
        display: none;
      }
      &.active i {
        display: inline-block;
      }
    }
  }

  .inner-txt {
    text-align: center;
    padding: 10px 0;
  }

  .inner-explain {
    margin-top: 10px;
    line-height: 1.1;
    color: #999;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    > i {
      margin-right: 5px;
    }

    p {
      margin: 0;
      padding: 0;
      margin-bottom: 5px;
    }
  }

  .inner-draggable {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: flex-start;
    .draggable-item {
    }
  }
}
</style>
